// 实现登录功能
$(function (){
  // 基于layui自定义表单验证规则
  var form = layui.form
  form.verify({
    // uname表示验证规则的名称
    // uname的值第0项表示验证规则，第一项表示验证错误提示信息
    uname: [/^[\S]{6,8}$/, '用户名必须是6-8位字符'],
    // 自定义新的验证规则
    pwd: function (value, item) {
      // value 表示输入框的值
      // item  表示对应得输入框的DOM元素
      var reg = /^\d{6}$/
      if (!reg.test(value)) {
        // 如果输入的值不是6位数字，就进行提示
        return '输入的密码必须是6位数字'
      }
    },
    samePwd: function (value) {
      // 验证两次输入的密码是否一样
      // 获取原密码的内容
      var prePwd = $('.reg-form input[type=password]').eq(0).val()
      if (prePwd !== value) {
        return '两次输入的密码不一致'
      }
    }
  })

  // 1、监听提交表单的事件
  $('.login-form').submit(function (e) {
    // 2、禁用表单的默认行为
    e.preventDefault()
    // 3、获取表单数据
    var formData = $(this).serialize()
    // 4、调用后端接口进行登录验证
    $.ajax({
      type: 'post',
      url: 'api/login',
      data: formData,
      success: function (res) {
        // 判断登录是否成功
        if (res.status === 0) {
          // 登录成功,跳转到主页面
          // 如果登录成功，后端会返回一个token，前端需要进行缓存
          sessionStorage.setItem('mytoken', res.token)
          location.href = './index.html'
        } else {
          // 登录失败
          layer.msg(res.message)
        }
      }
    })
  })

  // 控制登录表单和注册表单的切换
  $('.reg-link').click(function () {
    // 隐藏登录表单，显示注册表单
    $('.login-form').hide()
    $('.reg-form').show()
  })
  $('.login-link').click(function () {
    // 隐藏注册表单，显示登录表单
    $('.login-form').show()
    $('.reg-form').hide()
  })

  // 实现注册功能
  $('.reg-form').submit(function (e) {
    // 阻止表单默认提交
    e.preventDefault()
    // 获取表单数据
    var formData = $(this).serialize()
    // 调用接口提交表单
    $.ajax({
      type: 'post',
      url: 'api/reguser',
      data: formData,
      success: function (res) {
        // 判断是否注册成功，如果成功就显示登录框
        if (res.status === 0) {
          $('.login-link').click()
        } else {
          layer.msg(res.message)
        }
      }
    })
  })
})